<template>
  <div class="goods-comment-container auto-height-container">
    <vab-query-form>
      <el-button :icon="Plus" :loading="listLoading" native-type="submit" type="primary"
        @click="dialogVisible = true" style="margin-bottom:20px;">新增</el-button>
    </vab-query-form>

    <el-table ref="tableRef" v-loading="listLoading" border :data="list" class="table">
      <el-table-column type="selection" width="38" />
      <el-table-column align="center" label="序号" width="55">
        <template #default="{ $index }">
          {{ $index + 1 }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="tagID" min-width="180" prop="_id" show-overflow-tooltip />
      <el-table-column align="center" label="标签图标" min-width="160" prop="url">
        <template #default="{ row }">
          <el-popover placement="top-start" trigger="hover">
            <el-image :src="row.url" :preview-src-list="srcList" />
            <template #reference>
              <el-image :src="row.url" />
            </template>
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column align="center" label="标签名称" min-width="160" prop="tag" />
      <el-table-column align="center" label="操作" width="150">
        <template #default="{ row }">
          <el-button text type="danger" @click="handleDelete(row)">删除</el-button>
        </template>
      </el-table-column>
      <template #empty>
        <el-empty class="vab-data-empty" description="暂无数据" />
      </template>
    </el-table>
    <vab-pagination :current-page="queryForm.page" :page-size="queryForm.pageSize" :total="total"
      @current-change="handleCurrentChange" @size-change="handleSizeChange" />
    <el-dialog v-model="dialogVisible" title="用户端兴趣标签上传" width="500">
      <div>
        <el-form label-width="auto" style="max-width: 600px">
          <el-form-item label="标签图片">
            <el-upload class="avatar-uploader" action="http://120.79.170.227:5000/api/public/upload" :show-file-list="false"
              :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
              <img v-if="imageUrl" :src="imageUrl" class="avatar" />
              <el-icon v-else class="avatar-uploader-icon">
                <Plus />
              </el-icon>
            </el-upload>
          </el-form-item>
          <el-form-item label="标签名称">
            <el-input v-model="tag" />
          </el-form-item>
        </el-form>

      </div>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="uploadSwiper">
            确认
          </el-button>
        </div>
      </template>
    </el-dialog>
    <!-- <goods-comment-edit ref="editRef" @fetch-data="fetchData" /> -->
    <UploadSwiper ref="Refdialog" @fetch-data="fetchData" />
  </div>
</template>

<script lang="ts" setup>
  import { ref } from 'vue';
  import { ElMessage } from 'element-plus'
  import { Delete, Plus, UploadFilled } from '@element-plus/icons-vue';
  import { getdynamicsTags, NewdynamicsTags, dynamicsTagsdel } from '/@/api/newPagesApi';
  import type { UploadProps } from 'element-plus'

  const $baseConfirm = inject<any>('$baseConfirm')
  const $baseMessage = inject<any>('$baseMessage')
  const Refdialog = ref(null)
  const tableRef = ref<any>(null)
  const list = ref<any>([])
  const total = ref<any>(0)
  const imageUrl = ref('')
  const tag = ref('')
  const dialogVisible = ref(false)
  const listLoading = ref<boolean>(true)

  const queryForm = reactive<any>({
    page: 1,
    pageSize: 20,
  })

  const fetchData = async () => {
    listLoading.value = true
    const { data } = await getdynamicsTags(queryForm)
    list.value = data.data
    total.value = data.total
    listLoading.value = false
  }

  const handleSizeChange = (value : number) => {
    queryForm.page = 1
    queryForm.pageSize = value
    fetchData()
  }

  const handleCurrentChange = (value : number) => {
    queryForm.page = value
    fetchData()
  }

  const queryData = () => {
    queryForm.page = 1
    fetchData()
  }

  const handleAvatarSuccess : UploadProps['onSuccess'] = (
    response,
    uploadFile
  ) => {
    imageUrl.value = response.data.url;
  }

  const beforeAvatarUpload : UploadProps['beforeUpload'] = (rawFile) => {
    if (rawFile.size / 1024 / 1024 > 2) {
      ElMessage.error('图片大小不能超过2MB')
      return false
    }

    return true
  }

  //轮播图上传
  const uploadSwiper = async () => {
    try {
      const { message } : any = await NewdynamicsTags({
        url: imageUrl.value,
        tag: tag.value
      });

      $baseMessage(message, 'success', 'hey')
      await fetchData();
      dialogVisible.value = false;
    } catch (err) {
      console.log(err);
    }
  }

  const handleEdit = (row = {}) => {
    Refdialog.value?.showEdit?.();
  }

  //删除轮播图
  const handleDelete = (row : any) => {
    if (row._id) {
      $baseConfirm('您确定要删除当前项吗', null, async () => {
        const { message } : any = await dynamicsTagsdel({ id: row._id })
        $baseMessage(message, 'success', 'hey')
        await fetchData()
      })
    }
  }

  onActivated(() => {
    tableRef.value.doLayout()
  })

  onBeforeMount(() => {
    fetchData()
  })
</script>
<style scoped>
  .avatar-uploader .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }

  .table {
    margin-bottom: 20px;
  }
</style>

<style>
  .avatar-uploader .el-upload {
    border: 1px dashed var(--el-border-color);
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: var(--el-transition-duration-fast);
  }

  .avatar-uploader .el-upload:hover {
    border-color: var(--el-color-primary);
  }

  .el-icon.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    text-align: center;
  }
</style>
